﻿/*
 Plugin for smalljs toolkit
 Copyright (c) 2013 Walter M. Soto Reyes
 http://www.smalljs.com or https://smalljs.codeplex.com
 License: https://smalljs.codeplex.com/license
*/
(function () {
    var $ = smalljs.get;
    smalljs.extend({
        taggo: {
            tags: [],
            toRemove: [],
            params: null,
            remove: function (tag, displayId, tagClass) {
                var index = smalljs.taggo.tags.indexOf(tag);
                if (index != -1) {
                    smalljs.taggo.tags.splice(index, 1);
                    smalljs.taggo.addToRemove(tag);
                }
                smalljs.taggo.loadTags({ display: displayId, tagClass: tagClass });
            },
            deleteFromRemove: function (tag) {
                var index = smalljs.taggo.toRemove.indexOf(tag);
                if (index != -1) {
                    smalljs.taggo.toRemove.splice(index, 1);
                }
            },
            addToRemove: function (tag) {
                var removeIndex = smalljs.taggo.tags.indexOf(tag);
                if (removeIndex == -1) {
                    smalljs.taggo.toRemove.push(tag);
                }
            },
            handleAdd: function (e) {
                var key;
                if (window.event) {
                    key = window.event.keyCode;     //IE
                } else {
                    key = e.which;     //firefox
                }

                if (key == 44 || key == 13) {
                    smalljs.taggo.add();
                    return false;
                }
                return true;
            },
            add: function () {
                var params = smalljs.taggo.params;
                if (!smalljs.watermark.isEmpty(params.textbox)) {
                    var fromText = $(params.textbox).value.split(',');
                    for (var textLoop = 0; textLoop < fromText.length; textLoop++) {
                        if (smalljs.taggo.tags.indexOf(fromText[textLoop].trim()) === -1 && fromText[textLoop].trim().length > 0) {
                            smalljs.taggo.tags.push(fromText[textLoop].trim());
                            smalljs.taggo.deleteFromRemove(fromText[textLoop].trim()); //Remove from list is needed
                        }
                    }
                    smalljs.taggo.loadTags({ display: params.display, tagClass: params.tagClass }); //reload tags 
                    $(params.textbox).value = '';
                }
            },
            bind: function (params) {
                ///	<param name="params" type="object">
                ///{
                ///  textbox:'textbox id',
                ///  button:'button name or id'
                ///  display:'display object id',
                ///  tagClass:'tag css class'
                ///}
                ///	</param>
                smalljs.taggo.params = params;
                if (typeof (params.button) !== 'undefined') {
                    sj(params.button).onClick(function () {
                        smalljs.taggo.add();
                    });
                }
                
                sj(params.textbox).get[0].setAttribute('onkeypress', 'return smalljs.taggo.handleAdd(event)');
               
            },
            loadTags: function (params) {
                $(params.display).innerHTML = '';
                var i = 0;
                var first = true;
                for (var t in smalljs.taggo.tags) {
                    i++;
                    var onclick = "smalljs.taggo.remove('" + smalljs.taggo.tags[t] + "','" + params.display + "','" + params.tagClass + "')";
                 
                    var div = document.createElement('div');
                    div.innerHTML = smalljs.taggo.tags[t];
                    sj(div).addClass(params.tagClass);
                    div.setAttribute('onclick', onclick);
                    sj(params.display).get[0].appendChild(div);
                }
            },
            nodeinsert: function (newElement, parent) {
                ///	<summary>
                /// Insert node
                ///	</summary>
                ///	<param name="newElement" type="node">
                /// Node to be inserted.
                ///	</param>
                ///	<param name="parent" type="node">
                /// Parent node where the new node will be inserted (document.body is the default).
                ///	</param>
                if (typeof (parent) === 'undefined') {
                    document.body.appendChild(newElement);
                } else {
                    $(parent).appendChild(newElement);
                }
            }
        }
    });

})();